<template>
	<!-- 底部分享弹窗 -->
	<uni-popup ref="showshare" :type="type" @change="change">
		<view class="uni-share">
			<text class="uni-share-title">分享到</text>
			<view class="uni-share-content"> 
				<view v-for="(item, index) in shareListData" :key="index" class="uni-share-content-box">
					<view class="uni-share-content-image">
						<image :src="item.icon" class="content-image" mode="widthFix" />
					</view>
					<text class="uni-share-content-text">{{ item.text }}</text>
				</view>
			</view>
			<text class="uni-share-btn" @click="cancel('share')">取消分享</text>
		</view>
	</uni-popup>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {	
			uniPopup
		},
		data() {
			return {
				type: '',
				shareListData: [{
						text: '微信',
						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-2.png',
						name: 'wx'
					},	
					{
						text: 'QQ',
						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/gird-3.png',
						name: 'qq'
					},
					{
						text: '新浪',
						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-1.png',
						name: 'sina'
					},					
					{
						text: '其他',
						icon: 'https://img-cdn-qiniu.dcloud.net.cn/uni-ui/grid-5.png',
						name: 'more'
					}
				]
			}
		},
		props:{
			shareList:{
				type: Array,
				default: function(){
					return [];
				}
			}
		},
		created() {
			
		},
		methods:{
			toggle(type) {
				this.type = type||"bottom"
				this.$nextTick(() => {
					this.$refs['showshare'].open()
				})
			},
			cancel(type) {
				this.$refs['show' + type].close()
			},
			change(e) {
				console.log('是否打开:' + e.show)
			}
		}
	}
</script>

<style lang='scss'>
	.uni-popup {
	   z-index: 2000;
	}
    /* 底部分享 */ 
	.uni-share {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		background-color: #fff;
		
	}

	.uni-share-title {
		line-height: 60upx;
		font-size: 24upx;
		padding: 15upx 0;
		text-align: center;
	}

	.uni-share-content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 15px;
	}

	.uni-share-content-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		width: 170upx;
	}

	.uni-share-content-image {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 60upx;
		height: 60upx;
		overflow: hidden;
		border-radius: 10upx;
	}

	.content-image {
		width: 60upx; 
		height: 60upx;
	}

	.uni-share-content-text {
		font-size: 26upx;
		color: #333;
		padding-top: 5px;
		padding-bottom: 10px;
	}

	.uni-share-btn {
		height: 90upx;
		line-height: 90upx;
		font-size: 14px;
		border-top-color: #f5f5f5;
		border-top-width: 1px;
		border-top-style: solid;
		text-align: center;
		color: #666;
	}
</style>
